/*
 * @Author: xu xuejia
 * @Date: 2021-12-12 17:26:01
 * @LastEditors: xu xuejia
 * @LastEditTime: 2021-12-19 13:24:16
 * @Description: 大文件分片上传js
 * @FilePath: \Management-of-Scientific-Research-in-Universities-Front\src\assets\js\bigupload.js
 */
import WebUploader from 'webuploader'
// export default {
//   getUpMethod(file) {
//     if (file.size < 1024 * 1024 * 100) { return false } else {
//       this.initWebUpload()
//       this.upload(file)
//     }
//   },
//   initWebUpload() {
//     this.uploader = WebUploader.create({
//       auto: true, // 选完文件后，是否自动上传
//       swf: '../../static/lib/webuploader/Uploader.swf', // swf文件路径
//       server: this.url, // 文件接收服务端
//       pick: {
//         id: this.uploadButton, // 选择文件的按钮
//         multiple: this.multiple, // 是否多文件上传 默认false
//         label: ''
//       },
//       accept: this.getAccept(this.accept), // 允许选择文件格式。
//       threads: 20,
//       fileNumLimit: this.fileNumLimit, // 限制上传个数
//       // fileSingleSizeLimit: this.fileSingleSizeLimit, // 限制单个上传图片的大小
//       formData: this.formData, // 上传所需参数
//       chunked: true, // 分片上传
//       chunkSize: 1024 * 1024 * 5, // 分片大小
//       // chunkNumber: 1,
//       // totalChuncks: 3,
//       // totalSize: 15400,
//       // currentChunckSize: 1,
//       // identifier: this.formData.name,
//       duplicate: true// 重复上传
//     })
//     // 当有文件被添加进队列的时候，添加到页面预览
//     this.uploader.on('fileQueued', (file) => {
//       this.$emit('fileChange', file)
//     })
//     this.uploader.on('uploadBeforeSend', function(block, data) {
//       // block为分块数据。
//       console.log(block)
//       console.log(data)

//       // file为分块对应的file对象。
//       var file = block.file
//       var fileMd5 = file.wholeMd5

//       // 修改data可以控制发送哪些携带数据。
//       // 将存在file对象中的md5数据携带发送过去。
//       data.totalSize = file.size // 文件总大小
//       data.identifier = file.size // 文件唯一标识
//       data.chunkSize = 1024 * 1024 * 5 // 切片大小
//       data.currentChunkSize = block.end - block.start// 当前切片大小
//       // data.currentChunkSize = 1024 * 1024 * 5
//       data.chunkNumber = block.chunk // 当前所传文件的当前分片数
//       data.totalChunks = block.chunks // 当前所传文件的分片总数
//       data.md5Value = fileMd5// md5,文件的MD5值
//       data.id = file.id// 文件ID
//       data.filename = file.name// 文件名称
//       // data.file = file;//当前所传分片
//       // data.guid = GUID
//       data.type = 0

//       // 删除其他数据(默认的上传字段)
//       delete data.lastModifiedDate
//       delete data.size
//       delete data.name
//     })
//     // this.uploader.on('uploadStart', (file) => {
//     //   // 在这里可以准备好formData的数据
//     //   // this.uploader.options.formData.key = this.keyGenerator(file)
//     //   console.log(this.formData)
//     //   // this.formData.filename = file.name
//     //   this.uploader.options.formData.filename = file.name
//     //   this.uploader.options.formData.totalSize = file.size
//     //   console.log(file.name)
//     //   // this.uploader.options.formData.identifier = file.name
//     //   // this.uploader.options.formData.totalSize = file.size
//     //   console.log(this.formData)
//     // })
//     // 文件上传过程中创建进度条实时显示。
//     this.uploader.on('uploadProgress', (file, percentage) => {
//       this.$emit('progress', file, percentage)
//     })
//     this.uploader.on('uploadSuccess', (file, response) => {
//       this.$emit('success', file, response)
//     })
//     this.uploader.on('uploadError', (file, reason) => {
//       console.error(reason)
//       this.$emit('uploadError', file, reason)
//     })
//     this.uploader.on('error', (type) => {
//       let errorMessage = ''
//       if (type === 'F_EXCEED_SIZE') {
//         errorMessage = `文件大小不能超过${this.fileSingleSizeLimit / (1024 * 1000)}M`
//       } else if (type === 'Q_EXCEED_NUM_LIMIT') {
//         errorMessage = '文件上传已达到最大上限数'
//       } else {
//         errorMessage = `上传出错！请检查后重新上传！错误代码${type}`
//       }
//       console.error(errorMessage)
//       this.$emit('error', errorMessage)
//     })
//     this.uploader.on('uploadComplete', (file, response) => {
//       this.$emit('complete', file, response)
//     })
//   },
//   upload(file) {
//     this.uploader.upload(file)
//   }
// }
export default {
  name: 'Bigupload',
  props: {
    accept: {
      type: Object,
      default: null
    },
    // 上传地址
    url: {
      type: String,
      default: 'api/updateBigFile'
    },
    // 上传最大数量 默认为100
    fileNumLimit: {
      type: Number,
      default: 100
    },
    // 大小限制 默认2M
    fileSingleSizeLimit: {
      type: Number,
      default: 2048000
    },
    // 上传时传给后端的参数，一般为token，key等
    formData: {
      type: Object,
      default() {
        return {
          filename: '',
          totalSize: '',
          identifier: '',
          chunkSize: '',
          chunkNumber: '',
          totalChunks: '',
          currentChunkSize: '',
          projectId: '',
          atId: 0,
          status: 0,
          categoryId: 0
        }
      }
    },
    // 生成formData中文件的key，下面只是个例子，具体哪种形式和后端商议
    // keyGenerator: {
    //   type: Function,
    //   default(file) {
    //     const currentTime = new Date().getTime()
    //     const key = `${currentTime}.${file.name}`
    //     return key
    //   }
    // },
    // identifier: {
    //   type: Function,
    //   default(file) {
    //     const identifier = `${file.name}`
    //     return identifier
    //   }
    // },
    multiple: {
      type: Boolean,
      default: true
    },
    // 上传按钮ID
    uploadButton: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      uploader: null,
      projectId: ''
    }
  },
  mounted() {
    // this.initWebUpload()
    this.initWebUpload()
  },
  methods: {
    getUpMethod(file, projectId) {
      if (file.size < 1024 * 1024 * 100) { return false } else {
        this.projectId = projectId
        this.initWebUpload()
        this.upload(file)
      }
    },
    initWebUpload() {
      this.uploader = WebUploader.create({
        auto: true, // 选完文件后，是否自动上传
        swf: '../../static/lib/webuploader/Uploader.swf', // swf文件路径
        server: this.url, // 文件接收服务端
        pick: {
          id: this.uploadButton, // 选择文件的按钮
          multiple: this.multiple, // 是否多文件上传 默认false
          label: ''
        },
        accept: this.getAccept(this.accept), // 允许选择文件格式。
        threads: 20,
        fileNumLimit: this.fileNumLimit, // 限制上传个数
        // fileSingleSizeLimit: this.fileSingleSizeLimit, // 限制单个上传图片的大小
        formData: this.formData, // 上传所需参数
        chunked: true, // 分片上传
        chunkSize: 1024 * 1024 * 5, // 分片大小
        // chunkNumber: 1,
        // totalChuncks: 3,
        // totalSize: 15400,
        // currentChunckSize: 1,
        // identifier: this.formData.name,
        duplicate: true// 重复上传
      })
      // 当有文件被添加进队列的时候，添加到页面预览
      this.uploader.on('fileQueued', (file) => {
        this.$emit('fileChange', file)
      })
      this.uploader.on('uploadBeforeSend', function(block, data) {
        // block为分块数据。
        console.log(block)
        console.log(data)

        // file为分块对应的file对象。
        var file = block.file
        var fileMd5 = file.wholeMd5

        // 修改data可以控制发送哪些携带数据。
        // 将存在file对象中的md5数据携带发送过去。
        data.totalSize = file.size // 文件总大小
        data.identifier = file.size // 文件唯一标识
        data.chunkSize = 1024 * 1024 * 5 // 切片大小
        data.currentChunkSize = block.end - block.start// 当前切片大小
        // data.currentChunkSize = 1024 * 1024 * 5
        data.chunkNumber = block.chunk // 当前所传文件的当前分片数
        data.totalChunks = block.chunks // 当前所传文件的分片总数
        data.md5Value = fileMd5// md5,文件的MD5值
        data.id = file.id// 文件ID
        data.filename = file.name// 文件名称
        // data.file = file;//当前所传分片
        // data.guid = GUID
        data.type = 0
        // get参数
        data.projectId = this.projectId
        data.fileName = file.name
        data.atId = 0
        data.categoryId = 0
        data.status = 0

        // 删除其他数据(默认的上传字段)
        delete data.lastModifiedDate
        delete data.size
        delete data.name
      })
      // this.uploader.on('uploadStart', (file) => {
      //   // 在这里可以准备好formData的数据
      //   // this.uploader.options.formData.key = this.keyGenerator(file)
      //   console.log(this.formData)
      //   // this.formData.filename = file.name
      //   this.uploader.options.formData.filename = file.name
      //   this.uploader.options.formData.totalSize = file.size
      //   console.log(file.name)
      //   // this.uploader.options.formData.identifier = file.name
      //   // this.uploader.options.formData.totalSize = file.size
      //   console.log(this.formData)
      // })
      // 文件上传过程中创建进度条实时显示。
      this.uploader.on('uploadProgress', (file, percentage) => {
        this.$emit('progress', file, percentage)
      })
      this.uploader.on('uploadSuccess', (file, response) => {
        this.$emit('success', file, response)
      })
      this.uploader.on('uploadError', (file, reason) => {
        console.error(reason)
        this.$emit('uploadError', file, reason)
      })
      this.uploader.on('error', (type) => {
        let errorMessage = ''
        if (type === 'F_EXCEED_SIZE') {
          errorMessage = `文件大小不能超过${this.fileSingleSizeLimit / (1024 * 1000)}M`
        } else if (type === 'Q_EXCEED_NUM_LIMIT') {
          errorMessage = '文件上传已达到最大上限数'
        } else {
          errorMessage = `上传出错！请检查后重新上传！错误代码${type}`
        }
        console.error(errorMessage)
        this.$emit('error', errorMessage)
      })
      this.uploader.on('uploadComplete', (file, response) => {
        this.$emit('complete', file, response)
      })
    },
    upload(file) {
      // this.uploader.upload(file)
      this.upload(file)
    },
    stop(file) {
      this.uploader.stop(file)
    },
    // 取消并中断文件上传
    cancelFile(file) {
      this.uploader.cancelFile(file)
    },
    // 在队列中移除文件
    removeFile(file, bool) {
      this.uploader.removeFile(file, bool)
    },
    getAccept(accept) {
      switch (accept) {
        case 'text':
          return {
            title: 'Texts',
            exteensions: 'doc,docx,xls,xlsx,ppt,pptx,pdf,txt',
            mimeTypes: '.doc,docx,.xls,.xlsx,.ppt,.pptx,.pdf,.txt'
          }
        case 'video':
          return {
            title: 'Videos',
            exteensions: 'mp4',
            mimeTypes: '.mp4'
          }
        case 'image':
          return {
            title: 'Images',
            exteensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: '.gif,.jpg,.jpeg,.bmp,.png'
          }
        default: return accept
      }
    }
  }
}
